<template>
  <div>
    <el-button class="btn-top" primary @click="handleClick">查看成绩详情</el-button>
    <match-tree :tree-data="treeData" :editable="false" />
    <!-- 查看分数对话框 -->
    <score-dialog
      v-model:dialogVisible="viewScoreDialogVisible"
      :writeable="false"
      :participants="currentParticipant"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import matchTree from '@/components/matchTree.vue'
import scoreDialog from '@/components/scoreDialog.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const treeData = ref([
  {
    teamId: 'B1',
    score: 5,
    isWinner: true,
    children: [
      {
        teamId: 'B1',
        score: 3,
        children: [
          {
            teamId: 'B1',
            score: 3,
            children: []
          },
          {
            teamId: 'B2',
            score: 2,
            children: []
          }
        ]
      },
      {
        teamId: 'A2',
        score: 2,
        children: [
          {
            teamId: 'A1',
            score: 3,
            children: []
          },
          {
            teamId: 'A2',
            score: 2,
            children: []
          }
        ]
      }
    ]
  }
])

const exp = {
  name: '',
  teamId: '',
  group: '',
  totalScore: 0
}
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'teamId', label: '队伍编号', width: 90 },
  { prop: 'group', label: '组别', width: 60 },
  { prop: 'playWith', label: '对手', width: 60 },
  { prop: 'basicScore', label: '基础分' },
  { prop: 'bonusScore', label: '加分项' },
  { prop: 'totalScore', label: '总分' },
  { prop: 'advancement', label: '是否晋级' }
]
const t = [
  {
    totalScore: 100,
    bonusScore: 10,
    basicScore: 10,
    name: '张三',
    playWith: '李四',
    teamId: '001',
    group: 'A',
    advancement: '是',
    errors: {}
  },
  {
    totalScore: '',
    bonusScore: 10,
    basicScore: 10,
    name: '张三',
    playWith: '李四',
    teamId: '001',
    group: 'A',
    advancement: '是',
    errors: {}
  },
  {
    totalScore: 200,
    bonusScore: '',
    basicScore: 10,
    name: '张三',
    playWith: '李四',
    teamId: '001',
    group: 'A',
    advancement: '是',
    errors: {}
  }
]
const t1 = [
  {
    totalScore: 100,
    bonusScore: 10,
    basicScore: 10,
    name: '张三',
    playWith: '李四',
    teamId: '001',
    group: 'A',
    advancement: '是',
    errors: {}
  }
]
const currentParticipant = reactive([
  { type: '小组循环赛成绩', columns, competitionStage: [exp], tableData: t },
  { type: '抢位赛成绩', columns, competitionStage: [exp], tableData: t1 },
  { type: '淘汰赛成绩', columns, competitionStage: [exp] }
])

const viewScoreDialogVisible = ref(false)
const handleClick = node => {
  viewScoreDialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.btn-top {
  position: fixed;
  top: 110px;
  right: 70px;
}
</style>
